<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/plantillas/defaultTemplate.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <!-- ======================================================================================================= -->
    <ui:define name="titulo">
        <h:outputText value="Acciones de personal (Calendario)"/>
    </ui:define>
    <!-- ======================================================================================================= -->
    <ui:define name="acciones">
        <p:tab title="Calendario">
            <h:panelGrid columns="1">
                <p:commandLink styleClass="opcionMenu textoNormal" ajax="false" action="#{planilla$calendario.mostrarAcciones$action}" onmouseover="this.className='opcionMenu  textonegrita';" onmouseout="this.className='opcionMenu  textonormal';">
                    <p:graphicImage value="/resources/iconos/go-jump-today.png"/>
                    <h:outputText value="Mostrar acciones" styleClass="espacioTexto"/>
                </p:commandLink>
            </h:panelGrid>
        </p:tab>
        <p:tab title="Otras acciones">
            <h:panelGrid columns="1">
                <p:commandLink styleClass="opcionMenu textoNormal" action="accionesPersonal?faces-redirect=true" ajax="true" onmouseover="this.className='opcionMenu  textonegrita';" onmouseout="this.className='opcionMenu  textonormal';">
                    <p:graphicImage value="/resources/iconos/arrow-left.png"/>
                    <h:outputText value="Acciones de personal" styleClass="espacioTexto"/>
                </p:commandLink>
            </h:panelGrid>
        </p:tab>
    </ui:define>
    <!-- ======================================================================================================= -->
    <ui:define name="contenido">
        <h:outputScript target="head">
            function highlightCalendar(fechaActual, estiloCSS)
            {
            var diasMarcados = [#{planilla$calendario.fechas}];
            for (var i = 0; i &lt; diasMarcados.length; i++)
                if (new Date(diasMarcados[i].toString()) == fechaActual.toString())
                    return [true, estiloCSS, ''];
            return [true, ''];
            }

            jQuery(document).ready(
            function()
            {
            jQuery("#datepicker01").datepicker();
            jQuery("#datepicker01").datepicker("option", "monthNames", ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'] );
            jQuery("#datepicker01").datepicker("option", "dayNamesMin", ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa']);
            jQuery("#datepicker01").datepicker("option", "numberOfMonths", [3, 4]);
            jQuery("#datepicker01").datepicker("option", "stepMonths", 0);
            jQuery("#datepicker01").datepicker("option", "beforeShowDay", function (date) { return highlightCalendar(date, '#{planilla$calendario.estilo}'); });
            jQuery("#datepicker01").datepicker({dateFormat: 'mm/dd/yyyy'}).datepicker('setDate', '01/01/#{planilla$calendario.anio}');
            });
        </h:outputScript>        
        <table width="100%">
            <tr valign="top">
                <td width="33%">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <h:outputText value="A&ntilde;o"/>
                            </td>
                            <td>
                                <p:spinner value="#{planilla$calendario.anio}" min="1999" max="2999" style="width: 150px;"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p:spacer height="5"/>
                                <p:dataTable style="width: 200px;" rendered="#{request.isUserInRole('jefes') or request.isUserInRole('rrhh') }" value="#{planilla$calendario.listaEmpleados}" var="empleado" selectionMode="single" selection="#{planilla$calendario.empleadoSeleccionado}" rows="5" paginator="true" paginatorTemplate="{CurrentPageReport} {PreviousPageLink} {NextPageLink}">
                                    <p:column headerText="Empleado" filterBy="#{empleado.nombreCompleto}" sortBy="#{empleado.nombreCompleto}" filterMatchMode="contains" >
                                        <h:outputText value="#{empleado.nombreCompleto}"/>
                                    </p:column>
                                </p:dataTable>
                                <p:spacer height="10"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h:outputText value="Accion"/>
                            </td>
                            <td>
                                <h:selectOneMenu value="#{planilla$calendario.estilo}" style="height: 25px;padding-top: 3px;width: 150px;">
                                    <f:selectItem itemValue="festivos" itemLabel="Festivos"/>
                                    <f:selectItem itemValue="laborales" itemLabel="Laborales"/>
                                    <f:selectItem itemValue="vacaciones" itemLabel="Vacaciones"/>
                                    <f:selectItem itemValue="permisos" itemLabel="Permisos"/>
                                    <f:selectItem itemValue="capacitaciones" itemLabel="Capacitaciones"/>
                                </h:selectOneMenu>
                            </td>
                        </tr>
                        <tr valign="top">
                            <td colspan="2">
                                <table width="100%" border="0">
                                    <thead>
                                        <tr>
                                            <td width="50%">
                                                <h:outputText value="Color" style="font-weight: bold;"/>
                                            </td>
                                            <td width="50%">
                                                <h:outputText value="Accion" style="font-weight: bold;"/>
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td width="50%" style="background-color: yellow;"/>
                                            <td width="50%"><h:outputText value="Festivos"/></td>
                                        </tr>
                                        <tr>
                                            <td width="50%" style="background-color: lightskyblue;"/>
                                            <td width="50%"><h:outputText value="Laborales"/></td>
                                        </tr>
                                        <tr>
                                            <td width="50%" style="background-color: orange;"/>
                                            <td width="50%"><h:outputText value="Vacaciones"/></td>
                                        </tr>
                                        <tr>
                                            <td width="50%" style="background-color: salmon;"/>
                                            <td width="50%"><h:outputText value="Permisos"/></td>
                                        </tr>
                                        <tr>
                                            <td width="50%" style="background-color: greenyellow;"/>
                                            <td width="50%"><h:outputText value="Capacitaciones"/></td>
                                        </tr>
                                    </tbody>
                                </table>

                            </td>
                        </tr>
                    </table>
                </td>
                <td width="67%">
                    <div id="datepicker01" style="width: 100%;"/>
                </td>
            </tr>
        </table>
    </ui:define>
    <!-- ======================================================================================================= -->
    <ui:define name="dialogos"/>
    <!-- ======================================================================================================= -->
</ui:composition>